<style type="text/less" lang="less">
    @import url('./index.less');
</style>

<template>
    <div class="">
        <div class="login-box">
            <el-form ref="form" :model="form" :rules="rules">
                <el-form-item style="text-align: center;">
                    <img :src="`${$store.state.baseUrl}img/login_logo.png`">
                </el-form-item>
                <el-form-item>
                    <div class="welcome">欢迎登录！</div>
                </el-form-item>
                <el-form-item class="input-box" prop="account">
                    <el-input v-model="form.account" placeholder="账号" @keyup.enter.native="login" autofocus maxlength="200">
                        <template slot="prepend"><i class="iconfont icon-user"></i></template>
                    </el-input>
                </el-form-item>
                <el-form-item class="input-box" prop="password">
                    <el-input type="password" v-model="form.password" placeholder="密码" @keyup.enter.native="login" maxlength="200">
                        <template slot="prepend"><i class="iconfont icon-mima"></i></template>
                    </el-input>
                </el-form-item>
                <el-form-item style="margin-bottom: 0">
                    <el-button type="primary" @click="login" style="width: 100%;">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="login-box2">
<!--            <img :src="`${$store.state.baseUrl}img/company_logo2.png`" style="width: 200px;">-->
            <p>Copyright © 2015-2020 All Rights Reserved DateParser</p>
        </div>
    </div>
</template>

<script>
    export default {
        name: "login",
        data() {
            return {
                form: {
                    account: '',
                    password: ''
                },
                rules: {
                    account: [{ required: true, message: '账号不能为空'}],
                    password: [{ required: true, message: '密码不能为空'}],
                }
            };
        },
        methods: {
            login() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.$store.dispatch('ajax', {url: 'api/login', method: 'post', data: this.form, succeed: (res) => {
                                sessionStorage.token = res.token;
                                this.$router.push({path: '/connect'});
                            }
                        });
                    } else {
                        return false;
                    }
                });
            }
        }
    }
</script>
